<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input class="filter-item" placeholder="请输入商户名称" v-model="params.merchantName" style="width: 180px;" clearable></el-input>
      <el-input class="filter-item" placeholder="请输入编号" v-model="params.merchantNo" style="width: 130px;" clearable></el-input>
      <el-select class="filter-item" v-model="params.openStatus" filterable placeholder="商户状态" style="width: 120px;" clearable>
        <el-option value=1 label="正常"></el-option>
        <el-option value=0 label="关闭"></el-option>
      </el-select>
      <el-input class="filter-item" placeholder="请输入营业执照名称" v-model="params.licenseName" style="width: 180px;" clearable></el-input>
      <el-button class="filter-item" type="primary" icon="el-icon-edit-outline" @click="getPosmerchantList(1)">搜索</el-button>
      <el-button v-if="btnPower.AddStore" class="filter-item" type="primary" icon="el-icon-document" @click="getButton(1)">添加</el-button>
    </div>
    <el-table
      :data="posmerchantList"
      v-loading="posmerchantListLoading"
      element-loading-text="请稍后"
      border
      fit
      highlight-current-row>
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="merchantNo"
        label="商户编号"
        width="100"
        align="center">
      </el-table-column>
      <el-table-column
        prop="licenseName"
        label="营业执照名称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="merchantShortName"
        label="商户简称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="merchantName"
        label="线下门店名称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="openStatus"
        label="商户状态"
        :formatter="agentinfoType"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="提件时间"
        :formatter="timeFormat"
        width="100"
        align="center">
      </el-table-column>
      <el-table-column
        prop="modifyTime"
        label="更新时间"
        :formatter="timeFormat"
        width="100"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        width="210"
        align="center">
        <template slot-scope="scope">
          <el-button v-if="btnPower.CheckStore" type="primary" size="small" @click="getButton(0,scope.row)">查看</el-button>
          <el-button v-if="btnPower.ReviseStore" type="success" size="small" @click="getButton(2,scope.row)">修改</el-button>
          <el-button v-if="btnPower.CloseOpenStore" type="danger" size="small" @click="getAddRevPosmerchant(scope.row)">{{scope.row.openStatus==1?'关闭':'开启'}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.current" :limit.sync="params.size" @pagination="getPosmerchantList" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { posmerchantList, addRevPosmerchant } from '@/api/api.verify.js'

export default {
  components:{Pagination},
  name: 'StoreList',
  data() {
    return {
      btnPower:JSON.parse(localStorage.getItem('btnList')),//按钮权限
      posmerchantListLoading:true,
      posmerchantList: [],//门店列表
      total:0,//总条数
      params:{
          current: 1,
          size: 10,
          merchantName:null,//商户名称
          merchantNo:null,//商户编号
          openStatus:null,//商户状态  0关闭   1开启
          licenseName:null,//营业执照名称
      },//条件查询
    }
  },
  created() {
    this.getStart();
  },
  methods: {
    getStart(){//初始化
      this.getPosmerchantList(1)
    },
    getPosmerchantList(e){//获取支付平台门店列表
      let _this = this;
      if(e==1){this.params.current=1}
      let data=this.params;
      this.posmerchantListLoading=true
      posmerchantList(data).then(d=>{
        _this.posmerchantList = d.data.records;
        _this.total = Number(d.data.total);
      }).finally(d=>{
        _this.posmerchantListLoading=false
      })
    },
    getAddRevPosmerchant(e){
      let _this=this;
      let title='关闭';
      if(e.openStatus==0){title='开启'}
      this.$confirm('是否'+title+e.merchantName+'店','提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
          let data={}
          data.id=e.id;
          console.log(data);
          if(e.openStatus==0){data.openStatus=1}else{data.openStatus=0};
          addRevPosmerchant(data,'PUT').then(d=>{
            _this.$message({
                type: 'success',
                message: title+'成功!'
            });
            _this.getPosmerchantList();
          });
      }).catch(() => {
          this.$message({
          type: 'info',
          message: '已取消'+title
          });
      });
    },
    getButton(e,d){
      let id
      let tp
      switch(Number(e)){
        case 0://查看
          id=d.id
          tp=0
          break;
        case 1://添加
          break;
        case 2://修改
          id=d.id
          break;
      }
      this.$router.push({name:'StoreForm', query: {id:id,tp:tp} })
    },


    timeFormat(row, column, cellValue, index) {
      if(cellValue){
        return this.common.getLocalTime(parseInt(cellValue));
      }else{
        return '无'
      }
    },
    agentinfoType(row, column, cellValue){//商户状态
      switch(Number(cellValue)){
        case 0:
          return '关闭';
        case 1:
          return '正常';
        default:
          return cellValue;
      };
    },
  },
  watch: {
    "params.belongToAgent": function () {
      if (this.params.belongToAgent == "") {
        this.params.belongToAgent = null;
      }
    },
    "params.merchantName": function () {
      if (this.params.merchantName == "") {
        this.params.merchantName = null;
      }
    },
    "params.merchantNo":function(){
      if (this.params.merchantNo == "") {
        this.params.merchantNo = null;
      }
    },
    "params.openStatus":function(){
      if (this.params.openStatus == "") {
        this.params.openStatus = null;
      }
    },
    "params.licenseName": function () {
      if (this.params.licenseName == "") {
        this.params.licenseName = null;
      }
    }
  }
}
</script>

